<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<script src="js/jquery.min.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h1>{{address}}</h1>
		<div id="app" v-cloak>
		<!-- v-cloak指令解决插值表达式指令过多页面闪现问题 -->
			<h2>{{address}}</h2>
<!-- 		<h3>{{address}}</h3>
			<h4>{{address}}</h4>
			<h5>{{address}}</h5>
			<h6>{{address}}</h6> -->
			
			<!-- vue实现双向绑定:v-model 
			改变页面值,数据随之改变
			改变数据,页面插值表达式随之改变-->
			<input type="text" id="address" v-model="address"/>
			
			<p>{{name}}, {{age}}</p>
			
			<p>{{hobby}}, {{hobby.length}}</p>
			<p>第一个元素: {{hobby[0]}}
			最后一个元素: {{hobby[ hobby.length-1 ]}}
			</p>
			<!-- v-for循环指令 o:每次遍历的当前值
			hobby需要变遍历的数组-->
			<p>
			<span v-for="o in hobby">{{o}} </span>
			</p>
			<!-- 获取索引值 o,i in hobby o代表当前值,i代表索引 -->
			<p>
				<span v-for="o,i in hobby">{{i}}-{{o}} </span>
			</p>
			
			<!-- 对象的方式:对象.操作符,访问属性 -->
			<p>{{girl}}</p>
			<p>{{girl.name}}, {{girl.age}}</p>
			
			<!-- show判断,本质还是if,但在页面展现上
			false是通过样式Display: none来屏蔽的 -->
			<p v-show="girl.age>=18">成年</p>
			<p v-show="girl.age<18">未成年</p>
			
			<!-- if判断:如果age>=18,成年;如果age<18,未成年
			 如果true就显示标签内的内容,false就不显示-->
			<p v-if="girl.age>=18">成年</p>
			<p v-if="girl.age<18">未成年</p>
			
			<!-- 嵌套if -->
			<p v-if="money>=1900">一线不差钱</p>
			<p v-else-if="money>=1200">二线不差钱</p>
			<p v-else-if="money>=600">三线不差钱</p>
			<p v-else>穷</p>
			
			<!-- 往常插值表达式写在页面上,这里写在了属性中,所以vue在解析时把这个整体
			 当做了一个字符串,而不是插值表达式
			 解决办法:去掉{{}},在属性前加:(冒号)表明这个属性后面是变量而不是字符串-->
			链接: <!-- <a href="{{url}}" target="_blank">百度百科</a> -->
			<a :href="url" target="_blank">百度百科</a>
			
			<!-- vue事件 v-on alert()是js方法,vue用不了
			创建vue方法show() 打印到控制台-->
			<br>按钮: <button onclick="alert('点我有惊喜')">点我</button>
			<br>按钮: <button v-on:click="show">点我2</button>
			
			<br>
			
		</div>
	</body>
	
</html>

<script>
	//创建Vue对象,参数js对象,固定:el/data; 数组,对象
	var vm = new Vue({
		el:'#app',
		data:{//data数据区
			address:'北京颐和园',
			name:'王强',
			age:28,
			money: 100,
			url: 'http://baike.baidu.com',
			hobby:['红色','绿色','蓝色'],
			girl: {
				name: 'Rose',
				age: 18
			}
		},
		methods:{//method方法区
			show: function(){ //定义一个函数,点击按钮执行show()
				console.log('vue show func');
			}
		}
	});
</script>